<template>
	<layout>
		<view class="h-fill">
			<u-navbar @backPressed="navBack" title="订单记录" :customBack="true" titleColor="#fff" backIconColor="#fff" :background="navBg"></u-navbar>
			<u-sticky>
				<u-tabs :list="sections" :current="sectionIdx" activeColor="#D61719" bgColor="#F5F5F5" @change="handleChangeSection"></u-tabs>
			</u-sticky>
			<view>
				<view v-if="list.length" class="pad">
					<view v-for="(item, index) in list" :key="index" class="order-item">
						<image class="order-item-bg" src="../static/img/img_dingdan_bg@2x.png" mode="aspectFill"></image>
						<view class="order-item-top">
							<scroll-view scroll-y class="h-fill v-fill">
								<view class="uni-text-gray uni-flex uni-column pad" style="margin-left: -10rpx;min-height: 392rpx;">
									<u-row class="uni-flex-extend">
										<u-col :span="3">商品名称：</u-col>
                    <u-col :span="9" v-if="item.type === 'goods'">
                      <view class="uni-ellipsis">{{item.items[0].goods_name}}|{{item.items[0].sku_name}}</view>
                    </u-col>
                    <u-col :span="9" v-else-if="['subscribe', 'renewal'].includes(item.type)">
                      <view class="uni-ellipsis">{{item.items[0].script_name || '剧本杀'}}</view>
                    </u-col>
                    <u-col :span="9" v-else>
                      <view class="uni-ellipsis">-</view>
                    </u-col>
									</u-row>
									<u-row class="uni-flex-extend">
										<u-col :span="3">订单总价：</u-col>
                    <u-col :span="9" v-if="item.type === 'goods'">
                      <view class="uni-ellipsis">¥{{((item.total_fee || 0) / 100).toFixed(2)}}({{(item.items[0].price / 100).toFixed(2)}}x{{item.items[0].count}})</view>
                    </u-col>
										<u-col :span="9" v-else-if="['subscribe', 'renewal'].includes(item.type)">
                      <view class="uni-ellipsis">¥{{((item.total_fee || 0) / 100).toFixed(2)}}</view>
										</u-col>
                    <u-col :span="9" v-else>
                      <view class="uni-ellipsis">-</view>
                    </u-col>
									</u-row>
									<u-row class="uni-flex-extend">
										<u-col :span="3">订单号：</u-col>
										<u-col :span="9">
											<view class="uni-ellipsis">{{item._id}}</view>
										</u-col>
									</u-row>
									<u-row class="uni-flex-extend">
										<u-col :span="3">下单人：</u-col>
										<u-col :span="9">
											<view class="uni-flex align-center">
												<view class="uni-flex-extend uni-flex r-mg u-flex-wrap">
													<text>{{item.user_nickname || '微信用户'}}(ID: {{item.user_id}})</text>
													<text v-if="item.firstBrokerage && userInfo.shareGrade == 4">{{item.user_phone}}</text>
												</view>
												<nice-grade v-if="item.shareReward || item.firstBrokerage || item.secondBrokerage" :leftText="item.firstBrokerage ? '1级' : item.secondBrokerage ? '2级' : ''"
												 :showCrown="item.firstBrokerage != undefined && item.firstBrokerage > 0" :level="item.buyManGrade" :rightText="expertGrades[item.buyManGrade + ''].label"></nice-grade>
											</view>
										</u-col>
									</u-row>
									<u-row class="uni-flex-extend">
										<u-col :span="3">下单时间：</u-col>
										<u-col :span="9">{{formatTime(item.create_time)}}</u-col>
									</u-row>
									<u-row class="uni-flex-extend" v-if="item.shareMan">
										<u-col :span="3">分享人：</u-col>
										<u-col :span="9">
											<view class="uni-flex align-center">
												<view class="uni-flex-extend uni-flex r-mg u-flex-wrap">
													<text>{{item.shareMan}}(ID: {{item.shareManId}})</text>
													<text v-if="item.firstShareBrokerage && userInfo.shareGrade == 4">{{item.shareManPhone}}</text>
												</view>
												<nice-grade v-if="item.shareReward || item.firstShareBrokerage || item.secondShareBrokerage" :leftText="item.firstShareBrokerage ? '1级' : item.secondShareBrokerage ? '2级' : ''"
												 :showCrown="item.firstShareBrokerage != undefined && item.firstShareBrokerage > 0" :level="item.shareManGrade" :rightText="expertGrades[item.shareManGrade + ''].label"></nice-grade>
											</view>
										</u-col>
									</u-row>
								</view>
							</scroll-view>
						</view>
						<view class="order-item-bot pad uni-flex align-center">
							<view class="uni-flex-extend uni-flex uni-column align-center">
								<text class="uni-bold" style="color: #D61719;">￥{{((item.buyReward || 0) / 100).toFixed(2)}}</text>
								<text class="uni-text-gray">个人返现</text>
							</view>
							<view class="uni-flex-extend uni-flex uni-column align-center">
								<text class="uni-bold" style="color: #79C531;">￥{{((item.shareReward || 0) / 100).toFixed(2)}}</text>
								<text class="uni-text-gray">分享收益</text>
							</view>
							<view class="uni-flex-extend uni-flex uni-column align-center">
								<text class="uni-bold" style="color: #4CD964;">￥{{((item.firstShareBrokerage || item.secondShareBrokerage || 0) / 100).toFixed(2)}}</text>
								<text class="uni-text-gray">团队分享</text>
							</view>
							<view class="uni-flex-extend uni-flex uni-column align-center">
								<text class="uni-bold" style="color: #D68517;">￥{{((item.firstBrokerage || item.secondBrokerage || 0) / 100).toFixed(2)}}</text>
								<text class="uni-text-gray">团队佣金</text>
							</view>
						</view>
					</view>
					<uni-load-more :status="loadingStatus"></uni-load-more>
				</view>
				<view v-else class="pad">
					<u-empty></u-empty>
				</view>
			</view>
		</view>
	</layout>
</template>

<script>
	import {getMyOrders} from "../../api/platform/order.js"
	import {expertGrades} from "../../common/constants.js"
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				expertGrades,
				navBg: {
					'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)'
				},
				sections: [{
					name: "全部",
					type: "all"
				}, {
					name: "个人订单",
					type: "personal"
				}, {
					name: "团队订单",
					type: "team"
				}],
				sectionIdx: 0,
				list: [],
        total: -1,
				pageNum: 0,
				pageSize: 10,
				loadingStatus: 'noMore',
			}
		},
		computed: {
			...mapState(["userInfo"])
		},
		onLoad(option) {
			if (option.sectionIdx) {
				this.sectionIdx = option.sectionIdx;
			}
		},
		onShow() {
			this.reload();
		},
		async onPullDownRefresh() {
			await this.reload();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			navBack() {
				let pages = getCurrentPages();
				if (pages.length === 1) {
					uni.reLaunch({
						url: "/pages/platform/goods-list"
					})
				} else {
					uni.navigateBack();
				}
			},
			formatTime(time) {
        if (!time) return '-'
				let date = new Date();
				date.setTime(time);
				return date.format("yyyy-MM-dd hh:mm:ss");
			},
			handleChangeSection(index) {
				this.sectionIdx = index;
				this.reload();
			},
			async reload() {
				if (this.loadingStatus === "loading") {
					return;
				}
				this.list = [];
				this.pageNum = 0;
				this.loadingStatus = "more";
				await this.loadMore();
			},
			async loadMore() {
				if (this.loadingStatus === "loading" || this.loadingStatus === "noMore") {
					return;
				}
				let prevStatus = this.loadingStatus;
				this.loadingStatus = "loading";
				try{
					let { total, list } = await getMyOrders({
						pageNum: this.pageNum + 1,
						pageSize: this.pageSize,
						type: this.sections[this.sectionIdx].type
					});
          this.total = total
          if (!this.total) {
            this.pageNum = 1
            this.list = []
            this.loadingStatus = 'noMore'
            return
          }
					if (list.length) {
            this.pageNum += 1;
						this.list = this.list.concat(list);
					}
					if (this.list.length < total) {
						this.loadingStatus = "more";
					} else {
						this.loadingStatus = "noMore";
					}
				}catch(e){
					this.$log("加载订单列表遇到错误", e);
					this.loadingStatus = prevStatus;
				}
			}
		}
	}
</script>

<style lang="scss">
	.subsection-wrapper {
		height: 40px;
	}
	.order-item {
		position: relative;
		margin-bottom: 20rpx;
		&-bg {
			vertical-align: middle;
			width: 710rpx;
			height: 526rpx;
		}
		&-top {
			position: absolute;
			top: 0;
			width: 100%;
			height: 392rpx;
		}
		&-bot {
			position: absolute;
			top: 392rpx;
			width: 100%;
			bottom: 0;
		}
	}
</style>
